<template>
<div id="app">
  <div class="search-main">
    <div class="search-left">
        <div><span>住</span><span>{{nowDay}}</span></div>
        <div><span>离</span><span>{{leaveDay}}</span></div>
    </div>
    <div class="search-right">
        <input type="text" placeholder="关键字/位置/民宿">
        <van-icon name="search" id="sea" />
    </div>
  </div>
</div>
</template>

<script setup>
import useMainStore from '@/store/modules/mainStore'
import { getMonthDayV2 } from '@/util/formart_date'
import { computed } from '@vue/runtime-core';
import { storeToRefs } from 'pinia';
const mainStore = useMainStore()
const { startTime,EndTime } = storeToRefs(mainStore);

const nowDay = computed(()=>getMonthDayV2(startTime.value))
const leaveDay = computed(()=>getMonthDayV2(EndTime.value))
</script>
 
<style lang="less" scoped>
#app{
    z-index: 9;
    width: 100%;
    background-color: rgb(250, 249, 249);
    padding: 20px;
    height: 71px;
    position:fixed;
    box-sizing: border-box;
    top:0;
    left: 0;
    .search-main{
        display: flex;
        align-items: center;
        justify-content: space-between;
        .search-left{
            padding: 3px;
            border-radius: 6px;
            background-color: rgb(242,244,245);
            span{
                &:first-child{
                    color: gray;
                }
                &:nth-child(2){
                    color: rgb(88, 88, 88);
                }
            }
        }
        .search-right{
            
            margin-left: 3px;
            flex: 1;
            width: auto;
            height: 41px;
            display: flex;
            position: relative;
            input{
                border-radius: 6px;
                background-color: rgb(242,244,245);
                height: 41px;
                border: 0;
                flex: 1;
                margin: 0;
                padding: 0;
                text-indent: 1em;
            }
            #sea{
                right:10px;
                top: 15px;
                z-index: 9;
                position: absolute;
            }
        }
    }
}
</style>